<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>单击一个按钮会影响到其它所有实例</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="global.css" />
  </head>
  <body>
    <div id="app">
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>
    <script>
      var buttonCounterData = {
        count: 0,
      };
      // 定义一个名为 button-counter 的新组件
      Vue.component("button-counter", {
        data: function () {
          return buttonCounterData;
        },
        template: '<button v-on:click="count++">单击了{{ count }} 次</button>',
      });
      // 创建根实例
      var vm = new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
